<template>
  <div class="container">
    <div class="app-container">
      <template>
        <el-row>
          <span style="margin-left: 20px;">一体杆名称：</span>
          <el-input placeholder="请输入一体杆名称" style="width: 200px;margin-right: 20px;margin-top: 20px;" size="mini" />
          <span>一体杆编号：</span>
          <el-input placeholder="请输入一体杆编号" style="width: 200px;margin-right: 20px;margin-top: 20px;" size="mini" />
          <span>运行状态：</span>
          <el-select v-model="value" placeholder="请选择运行状态" style="width: 200px;margin-right: 20px;margin-top: 20px;" size="mini">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
          <el-button type="primary" size="mini" style="border-radius: 4px;">查询</el-button>
        </el-row>
        <el-row>
          <el-button type="primary" size="mini" style="margin-left: 20px;margin-top: 40px;border-radius: 4px;">添加一体杆</el-button>
          <el-button size="mini" style="margin-left: 20px;margin-top: 40px;margin-bottom: 15px;border-radius: 4px;">批量删除</el-button>
        </el-row>
        <el-table v-loading="loading" :data="list" style="width: 100%;">
          <el-table-column type="selection" />
          <el-table-column label="序号" type="index" />
          <el-table-column label="一体杆名称" prop="poleName" />
          <el-table-column label="一体杆编号" prop="poleNumber" />
          <el-table-column label="一体杆IP" prop="poleIp" />
          <el-table-column label="安装区域" prop="areaName" />
          <el-table-column label="一体杆类型" prop="poleType">
            <template slot-scope="scope">
              <span v-if="scope.row.poleType === 'entrance'">入口</span>
              <span v-else-if="scope.row.poleType === 'export'">出口</span>
            </template>
          </el-table-column>
          <el-table-column label="运行状态" prop="poleStatus" />
          <el-table-column label="操作">
            <template>
              <el-button type="text" size="mini">查看</el-button>
              <el-button type="text" size="mini">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <el-row type="flex" justify="end">
          <el-pagination
            :page-sizes="[10,20,50,100]"
            :page-size="pageParams.pagesize"
            :current-page="pageParams.page"
            :total="pageParams.total"
            layout="total, prev, pager, next, sizes, jumper"
            @current-change="changePage"
            @size-change="changecurrent"
          />
        </el-row>
      </template>
    </div>
  </div>
</template>
<script>
import { getIntergratePoleListAPI } from '@/api'

export default {
  name: 'IntegratedPoleManagement',
  data() {
    return {
      value1: '',
      options: [{
        value: '选项1',
        label: '全部'
      },
      {
        value: '选项2',
        label: '正常'
      },
      {
        value: '选项3',
        label: '异常'
      }
      ],
      loading: false,
      pageParams: {
        page: 1,
        pagesize: 5,
        total: 0
      },
      list: []
    }
  },
  created() {
    this.getIntegratePoleList()
  },
  methods: {
    async getIntegratePoleList() {
      this.loading = true
      const { rows, total } = await getIntergratePoleListAPI(this.pageParams)
      this.list = rows
      this.pageParams.total = total
      this.loading = false
    },
    async changePage(newPage) {
      this.loading = true
      this.pageParams.page = newPage // 赋值当前页码
      await this.getIntegratePoleList()
      this.loading = false
    },
    async changecurrent(newcurrent) {
      this.loading = true
      this.pageParams.pagesize = newcurrent
      await this.getIntegratePoleList()
      this.loading = false
    }
  }
}
</script>
